<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('火力全开：全自动分页列表查询')}`">{{ $t('火力全开：全自动分页列表查询') }}</t>
            <li>
                一般来说，表格内的数据多半都是从后台接口获取，这个组件也提供了完美的接口配置入口，
                你只需配置<span class="d-code">request-config</span>
                即可实现全自动分页查询
            </li>
            <li>
                <span class="d-code">request-config</span>用于指定后台接口相关的配置，
                包括接口地址、接口参数、请求方式等，同时，<span class="s-code">request-config</span>内还提供
                <el-tag type="danger">customSearchParams</el-tag> 方法用于在发起请求前手动修改查询参数；以及
                <span class="s-code">callback</span>回调方法来指定列表数据或者修改列表源数据等等；
                除此之外，它还支持传入<span class="s-code">axios</span>的所有可配置参数，详细配置说明请查阅
                <span class="s-code pointer" @click="handleViewAxios">【Axios】</span>
            </li>
            <li>
                <el-tag type="danger">customSearchParams</el-tag> 方法可能在面对包含较为复杂控件时非常常用，有时候你使用的控件绑定值可能是一个数组，
                此时你可以在发起请求之前通过该方法来处理相关的请求参数；
            </li>
            <li>
                组件内部是会深度监听<span class="d-code">request-config</span>的变更的，如果该配置对象发生改变，
                那么组件内部会自动根据最新接口配置来重新请求列表数据
            </li>
            <li>
                组件内部提供了一系列的方法供外部调用，例如
                <span class="s-code">search</span>、
                <span class="s-code">getTableData</span>等，这两个方法都能用于刷新列表；
                <span class="s-code">search</span>是手动触发查询按钮的点击（分页参数会被初始化，会执行表单校验逻辑），
                而<span class="s-code">getTableData</span>是根据当前查询条件及分页参数来重新获取列表数据，不会执行表单校验逻辑，该方法支持传入一个布尔值来控制是否保存列表数据之前的勾选状态；并且会返回一个 Promise，接口调用成功后会把接口数据传出来；
                更多方法请查阅下方【Refs提供的实例方法】文档说明
            </li>
            <li>
                注意：当组件内部通过<span class="d-code">request-config</span>配置请求接口数据时，默认会把排序相关的字段以及分页相关的字段也当做接口参数，
                当然，这些字段的key可能不一定能符合你的接口要求，你可以通过参照下面的说明来配置<span class="d-code">page-param-keys</span>，从而替换掉对应字段的key；
                <br />
                <span class="s-code">
                    {
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    page: <span class="d-code">"表示当前页码的key，默认为'pageNum'"</span>,
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    pageSize: <span class="d-code">"表示每页条数的key，默认为'pageSize'"</span>,
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    orderBy: <span class="d-code">"表示排序方式的key，默认为'orderBy'"</span>,
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    orderByClause: <span class="d-code">"表示当前排序字段的key，默认为'orderByClause'"</span>,
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    orderAscendingValue: <span class="d-code">"表示代表升序的值，默认为'asc'"</span>,
                    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    orderDescendingValue: <span class="d-code">"表示代表降序的值，默认为'desc'"</span>,
                    <br />&nbsp;&nbsp;
                    }
                </span>
            </li>
            <li>此处示例请求的接口是由本地json数据模拟的，查询结果不一致属于正常，你可以打开<span class="s-code">F12</span>查看接口请求情况</li>
        </template>
        <div style="margin-bottom: 10px;">
            <el-button @click="handleChangeUrl">手动切换接口地址</el-button>
            <el-button @click="handleChangeParams">手动修改接口参数</el-button>
        </div>
        <sib-table
            ref="sibTable"
            :page-param-keys="pageParamKeys"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row, index, realIndex }">
                <el-button size="small" type="danger" plain @click="handleDeleteRow(row, index, realIndex)">删除</el-button>
            </template>
        </sib-table>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    setup() {
        const sibTable = ref(null);
        const requestConfig = reactive({
            // 支持全路径
            // url: 'http://www.bearsee.com.cn/sibionics-ui/table-data.json',
            url: '/api/list-data.json',
            method: 'get',
            params: { searchKey: 1 },
            // 请求列表数据前的回调方法，支持 return 一个新的对象来替换即将发起请求的参数；该方法的回调参数为当前的请求参数params，支持异步处理
            customSearchParams: (params) => ({ ...params, customKey: 'customValue' }), // 同步处理示例
            // customSearchParams: (params) => new Promise((resolve) => { // 异步处理示例
            //     setTimeout(() => {
            //         resolve({ ...params, customKey: 'customValue' });
            //     }, 1000);
            // }),
            // 当接口请求成功，组件内部会默认根据接口返回的结果自动寻找列表数据；
            // 你也可以通过 callback 回调方法来指定列表数据或者修改列表源数据，该方法参数为接口返回的res，需要 return 修改后的数据
            // callback: (res) => res.data.list,
            // 非必传，当接口请求成功，组件内部会默认根据接口返回的结果自动寻找列表数据总条数；你也可以通过 totalCallback 回调方法来手动指定数据总条数。
            // totalCallback: (res) => res.data.totalNum,
        });

        return {
            sibTable,
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age', sortable: true },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status', formatter: (row) => ({ 1: '启用', 0: '禁用' })[row.status] },
                { label: '操作', code: 'operate', type: 'slot' },
            ],
            requestConfig,
            searchConfig: {
                // fields 查询控件同样支持配置 requestConfig 自动请求数据
                // 详细用法可以参照 【form 表单】 内的示例介绍
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: 0, label: '女' },
                            { value: 1, label: '男' },
                        ],
                    },
                ],
            },
            pageParamKeys: { page: 'PAGE', pageSize: 'PAGESIZE', orderBy: 'ORDERBY' },
            handleChangeUrl() {
                requestConfig.url = requestConfig.url === '/api/list-data.json' ? '/api/tree-data.json' : '/api/list-data.json';
            },
            handleChangeParams() {
                requestConfig.params.searchKey += 1;
            },
            handleDeleteRow(row, index, realIndex) {
                // eslint-disable-next-line
                console.log('row, index, realIndex: ', row, index, realIndex);
                ElMessageBox.confirm('请确认是否删除?', '温馨提示').then(() => {
                    ElMessage({ message: '删除成功', type: 'success' });
                    // 刷新列表
                    sibTable.value.getTableData();
                }).catch(() => {});
            },
            handleViewAxios() {
                window.open('https://github.com/axios/axios#request-config', '_blank');
            },
            templateString: `<template>
    <div class="example-box">
        <div style="margin-bottom: 10px;">
            <el-button @click="handleChangeUrl">手动切换接口地址</el-button>
            <el-button @click="handleChangeParams">手动修改接口参数</el-button>
        </div>
        <sib-table
            ref="sibTable"
            :page-param-keys="pageParamKeys"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :request-config="requestConfig">
            <!-- 自定义插槽，插槽名称为对应列配置的 code -->
            <template #operate="{ row, index, realIndex }">
                <el-button size="small" type="danger" plain @click="handleDeleteRow(row, index, realIndex)">删除</el-button>
            </template>
        </sib-table>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
    setup() {
        const sibTable = ref(null);
        const requestConfig = reactive({
            // 支持全路径
            // url: 'http://www.bearsee.com.cn/sibionics-ui/table-data.json',
            url: '/api/list-data.json',
            method: 'get',
            params: { searchKey: 1 },
            // 请求列表数据前的回调方法，支持 return 一个新的对象来替换即将发起请求的参数；该方法的回调参数为当前的请求参数params，支持异步处理
            customSearchParams: (params) => ({ ...params, customKey: 'customValue' }), // 同步处理示例
            // customSearchParams: (params) => new Promise((resolve) => { // 异步处理示例
            //     setTimeout(() => {
            //         resolve({ ...params, customKey: 'customValue' });
            //     }, 1000);
            // }),
            // 当接口请求成功，组件内部会默认根据接口返回的结果自动寻找列表数据；
            // 你也可以通过 callback 回调方法来指定列表数据或者修改列表源数据，该方法参数为接口返回的res，需要 return 修改后的数据
            // callback: (res) => res.data.list,
            // 非必传，当接口请求成功，组件内部会默认根据接口返回的结果自动寻找列表数据总条数；你也可以通过 totalCallback 回调方法来手动指定数据总条数。
            // totalCallback: (res) => res.data.totalNum,
        });

        return {
            sibTable,
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age', sortable: true },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status', formatter: (row) => ({ 1: '启用', 0: '禁用' })[row.status] },
                { label: '操作', code: 'operate', type: 'slot' },
            ],
            requestConfig,
            searchConfig: {
                // fields 查询控件同样支持配置 requestConfig 自动请求数据
                // 详细用法可以参照 【form 表单】 内的示例介绍
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: 0, label: '女' },
                            { value: 1, label: '男' },
                        ],
                    },
                ],
            },
            pageParamKeys: { page: 'PAGE', pageSize: 'PAGESIZE' },
            handleChangeUrl() {
                requestConfig.url = requestConfig.url === '/api/list-data.json' ? '/api/tree-data.json' : '/api/list-data.json';
            },
            handleChangeParams() {
                requestConfig.params.searchKey += 1;
            },
            handleDeleteRow(row, index, realIndex) {
                console.log('row, index, realIndex: ', row, index, realIndex);
                ElMessageBox.confirm('请确认是否删除?', '温馨提示').then(() => {
                    ElMessage({ message: '删除成功', type: 'success' });
                    // 刷新列表
                    sibTable.value.getTableData();
                }).catch(() => {});
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
